<template>
  <div class="container">
    <div class="tabs">
      <van-row>
        <template v-for="(item,index) in arr">
          <van-col span="12" class="common" :class="{active:item.isTrue}" :key="item.time" @click="changeUrl(item.url,index)">
            <span class="time">{{item.time}}</span>
            <span class="time status">{{item.status}}</span>
          </van-col>
        </template>
      </van-row>
      <div>
        <!-- 倒计时 -->
        <countdown :title1="title1" :title2="title2"></countdown>
      </div>
    </div>
    <!-- 抢购商品列表 -->
    <div>
      <router-view :isTrue="flag"></router-view>
    </div>
  </div>
</template>
<script>
import countdown from "./countdown";  //导入倒计时
import seckilllist from "./seckilllist/seckilllist";  //导入秒杀列表
export default {
  components: {
    countdown,
    seckilllist,
  },
  data() {
    return {
      arr: [
        { time: "10:00", status: "抢购中", isTrue: true,url:'seckilllist'},
        { time: "15:00", status: "即将开始", isTrue: false,url:'tostartlist' },
      ],
      flag:true,
      title1:"数量有限,先下单先得",
      title2:"距离结束",
      panicBuyUrl:'../../../static/images/seckill/go-panicbuying1-1x.png',
      markUrl:"../../../static/images/seckill/iocn-1x.png",
    };
  },
  methods: {
    changeUrl(url,index){
      this.$router.push(`/seckill/${url}`).catch(err=>{});  //跳转路由
      window.document.title = this.$route.meta.title;
      this.arr.forEach((item=>{  //先清空类名
        item.isTrue = false;
      }))
      this.arr[index].isTrue = true;  //让当前的添加类名
    },
  },
  watch: {
        $route(to){ //路由地址监听  进行页面内容显示切换
            if(this.$route.path=="/seckill/tostartlist"){
                this.flag = false
            }else{
              this.flag = true
            }
        }
    },
};
</script>
<style lang="less" scoped>
.container {
  background-color: #f1f1f1;
  width: 100%;
  height: 100%;
  padding-bottom: 20px;
  .tabs {
    position: relative;
    background-color: #333;
    height: 164px;
    text-align: center;
    .common {
      color: #bfbfbf;
      height: 164px;
      .time {
        font-size: 34.24px;
        display: block;
        &:nth-child(1) {
          margin-top: 20px;
        }
      }
      .status{
        font-size: 25.11px;
      }
    }
    .active {
      color: #ffcf51;
    }
  }
}
// 倒计时样式
/deep/.item {
  display: inline-block;
  color: #fff;
  font-size: 22.71px;
  text-align: center;
  width: 34px;
  height: 34px;
  line-height: 34px;
  background: #f36a50;
  border-radius: 6px;
  margin-top: 14px;
  margin-right: 5px;
  &:nth-child(5){
      margin-right: 0;
  }
}
</style>
